<template>
  <div class="off-line">
    <div class="mescroll"  ref="mescroll">
      <div class="clear">
        <img src="@/assets/xianxiajiaoyu.png" class="top-img" alt="">
        <div class="search" @click="router({path: './searchStore'})">
          <img src="@/assets/xianxiamendian02.png" alt="">
          <span>搜索门店（可按选择省市区、门店名称搜索）</span>
        </div>
        <div class="list">
          <div v-for="item in store_list" class="item" @click="router({path: './storeDetails',query:{id:item.id}})">
            <span class="item-img"><img :src="item.img" alt=""></span>
            <div class="cons">
              <p class="title">{{item.title}}</p>
              <p class="address">
                <span class="address-name">{{item.address}}</span>
                <span class="address-num" v-show="item.juli != '0'">{{item.juli}}</span>
              </p>
              <p class="tip">
                <img class="tip-img" src="@/assets/xianxiamendian03.png" alt="">
                <span class="tip-con">{{item.brief}}</span>
              </p>
            </div>
            <i class="icon" v-show="item.banka">已办卡</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {storeSearch, storeSearchLocation} from '@/api/api'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
import { wxlocation } from "@/config/wxLocation.js"
  export default {
    components: {
    },
    data () {
      return {
        store_list:[],
        mescroll: null, //mescroll实例对象
        latitude: '',
        longitude: '',
      }
    },
    created () {
      this.store_search_location()
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      upCallback (page) {  
        var dataJson = {
          lat: this.latitude,
          lon: this.longitude,
          p: page.num,
          num: page.size
        }    
        storeSearch(dataJson).then((res) => {
          console.log(res)
          if (page.num == 1){
            this.store_list = []
          }
          if(res.data == null){
            console.log(1)
            this.mescroll.endErr()
            return
          }
          this.$nextTick(() => {
            this.mescroll.endSuccess(res.data.data.list.length);
          })
          this.store_list = this.store_list.concat(res.data.data.list)
        }).catch((err) => {
          console.dir(err)
          this.mescroll.endErr()
        })
      },
      store_search_location() {
        storeSearchLocation().then((res) => {
          wxlocation(res.data.data, (resSucc) => {
            this.latitude = resSucc.latitude;
            this.longitude = resSucc.longitude;
            this.mescroll = new MeScroll(this.$refs.mescroll, { 
              up: {
                callback: this.upCallback
              }
            })
          }, (resErr) => {
            console.dir(resErr)
          })
        }).catch((err) => {
          console.dir(err)
        })
      },
    }
  }
</script>

<style lang="stylus" scoped>
.off-line
  min-height 100vh
  background-color #f5f5f5
  padding-bottom 6rem
  box-sizing border-box
  .mescroll
    position fixed
    top 0
    bottom 0
    height auto
    width 100vw
    overflow-x hidden
    padding-bottom 5rem
    box-sizing border-box
    .top-img
      float left
    .search
      float left
      width 92%
      margin-left 4%
      text-align center
      background-color #fff
      height 4.5rem
      line-height 4.5rem
      margin-top -2.25rem
      margin-bottom 1rem
      img
        display inline-block
        vertical-align middle
        width 1.6rem
      span
        display inline-block
        vertical-align middle
        font-size 1.3rem
        color #172F6D
        margin-left .5rem
    .list
      padding 0 2rem
      background-color #fff
      float left
      .item
        padding 1.5rem 0
        display flex
        border-bottom 1px solid #e6e6e6
        position relative
        &:last-child
          border-bottom none
        .item-img
          width 12.2rem
          height 9.2rem
          margin-right 1rem
          display flex
          img
            object-fit cover
        .cons
          flex 1
          .title
            color #333333
            font-size 1.7rem
            font-weight bold
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
            width calc(100vw - 17.2rem)
          .address
            font-size 1.2rem
            color #999
            overflow hidden
            margin 1.3rem 0
            .address-name
              white-space nowrap
              overflow hidden
              text-overflow ellipsis
              float left
              width calc(100vw - 22.2rem)
            .address-num
              float right
              text-align right
          .tip
            overflow hidden
            .tip-img
              width 1.6rem
              height 1.6rem
              float left
            .tip-con
              float left
              margin-left .5rem
              white-space nowrap
              overflow hidden
              text-overflow ellipsis
              width calc(100vw - 21.2rem)
              color #172F6D   
        .icon
          position absolute
          width 5rem
          height 2.2rem
          background linear-gradient(0deg,rgba(180,48,20,1) 0%,rgba(210,56,24,1) 100%)
          font-size 1.2rem
          color #fff
          text-align center
          line-height 2.2rem
</style>
